<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="jtable/themes/redmond/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" type="text/css" />
<link href="jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="jtable/jquery.jtable.js"></script>
<script type="text/javascript" src="jtable/jtablesite.js"></script>
<script type="text/javascript" src="jtable/modernizr-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

<title>Insert title here</title>

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						$('#JobTableContainer')
								.jtable(
										{
											title : 'Jobs',
											paging : true, //Enable paging
											sorting : true, //Enable sorting
											defaultSorting : 'UpdateTime ASC',
											//openChildAsAccordion : true, //Enable this line to show child tabes as accordion style
											actions : {
												listAction : 'ListJob',
												deleteAction : 'DeleteJob',
												updateAction : 'UpdateJob',
												createAction : 'CreateJob'
											},
											fields : {

												Schedule : {
													title : 'Schedule',
													width : '5%',
													sorting : false,
													edit : false,
													create : false,
													display : function(JobData) {
														//Create an image that will be used to open child table
														var $img = $('<img src="image/note.png" title="Edit Schedule Time" />');
														//Open child table when user clicks the image
														$img
																.click(function() {
																	$(
																			'#JobTableContainer')
																			.jtable(
																					'openChildTable',
																					$img
																							.closest('tr'), //Parent row
																					{
																						title : JobData.record.JobName
																								+ ' - Schedule Time',
																						actions : {
																							listAction : 'ListTrigger?JobName='
																									+ JobData.record.JobName
																									+ "&JobGroup="
																									+ JobData.record.JobGroup,
																							deleteAction : 'DeleteTrigger?JobName='
																									+ JobData.record.JobName
																									+ "&JobGroup="
																									+ JobData.record.JobGroup,
																							updateAction : 'UpdateTrigger',
																							createAction : 'CreateTrigger'
																						},
																						fields : {
																							JobGroup : {
																								type : "hidden",
																								title : "JobGroup",
																								defaultValue : JobData.record.JobGroup
																							},
																							JobName : {
																								//key : true,
																								title : "JobName",
																								type : "hidden",
																								defaultValue : JobData.record.JobName
																							},
																							TriggerGroup : {
																								key : true,
																								title : "TriggerGroup",
																								width : '10%',
																								type : 'hidden',
																								defaultValue : JobData.record.JobGroup
																							},
																							TriggerName : {
																								key : true,
																								title : "TriggerName",
																								width : '10%',
																								defaultValue : JobData.record.JobName
																							},
																							SchedType : {
																								title : 'Schedule Type',
																								width : '10%',
																								options : {
																									0 : 'Simple',
																									1 : 'Crontab(Advanced)'
																								}
																							},
																							Start : {
																								title : 'Start',
																								width : '15%',
																								defaultValue : '2012-12-11 12:30:00'

																							//type : "date"
																							},
																							End : {
																								title : 'End',
																								width : '15%',
																								defaultValue : '2012-12-21 12:30:00'
																							//type : "date"
																							},
																							Repeat : {
																								title : 'Repeat',
																								width : '10%',
																								defaultValue : -1
																							},
																							Interval : {
																								title : 'Interval(ms)',
																								width : '10%',
																								defaultValue : 10000
																							},
																							Crontab : {
																								title : 'Crontab(Advanced)',
																								width : '20%',
																								defaultValue : '* * * * * ?'
																							},
																							TriggerDesc : {
																								title : "Description",
																								width : "20%",
																								type : "textarea"
																							}
																						}
																					},
																					function(
																							data) { //opened handler
																						data.childTable
																								.jtable('load');
																					});
																});
														//Return image to show on the person row
														return $img;
													}
												},
												Actions : {
													title : 'Actions',
													width : '5%',
													sorting : false,
													edit : false,
													create : false,
													defaultSorting : "ActionSeq DESC",
													display : function(JobData) {
														//Create an image that will be used to open child table
														var $img = $('<img src="image/note.png" title="Edit Actions" />');
														//Open child table when user clicks the image
														$img
																.click(function() {
																	$(
																			'#JobTableContainer')
																			.jtable(
																					'openChildTable',
																					$img
																							.closest('tr'), //Parent row
																					{
																						title : JobData.record.JobName
																								+ ' - Actions',
																						actions : {
																							listAction : 'ListAction?JobName='
																									+ JobData.record.JobName
																									+ "&JobGroup="
																									+ JobData.record.JobGroup,
																							deleteAction : 'DeleteAction?JobName='
																								+ JobData.record.JobName
																								+ "&JobGroup="
																								+ JobData.record.JobGroup,
																							updateAction : 'UpdateAction',
																							createAction : 'CreateAction'
																						},
																						fields : {
																							JobGroup : {
																								key : true,
																								type : "hidden",
																								title : "JobGroup",
																								defaultValue : JobData.record.JobGroup
																							},
																							JobName : {
																								key : true,
																								title : "JobName",
																								type : "hidden",
																								defaultValue : JobData.record.JobName
																							},
																							ActionSeq : {
																								key : true,
																								title : "ActionSeq",
																								width : "10%",
																								sorting : true,
																								create : false
																							},
																							Command : {
																								title : "Command",
																								width : "30%",
																								options : 'ListProgram'
																							},
																							Parameter : {
																								title : "Parameter",
																								width : "30%"
																							},
																							ActDesc : {
																								title : "Description",
																								width : "30%",
																								type : "textarea"
																							}
																						}
																					},
																					function(
																							data) { //opened handler
																						data.childTable
																								.jtable('load');
																					});
																});
														//Return image to show on the person row
														return $img;
													}
												},
												JobGroup : {
													key : true,
													title : 'Group',
													width : '15%',
													edit : true,
													create : true
												},
												JobName : {
													key : true,
													title : 'Name',
													width : '20%',
													edit : true,
													create : true
												},

												JobDesc : {
													title : 'Description',
													width : '30%',
													type : "textarea"
												},
												JobStatus : {
													title : 'Status',
													width : '10%',
													edit : false,
													list : true,
													create : false,
													edit : false,
													options : {
														'0' : '<font color="red">'+'unscheduled'+'</font>',
														'1' : '<font color="blue">'+'scheduled' + '</font>'
													}
												},
												UpdateTime : {
													title : 'Latest Update',
													width : '25%',
													sort : true,
													type : 'time',
													create : false,
													edit : false
												}
											}
										});

						//Load student list from server
						$('#JobTableContainer').jtable('load');
						

					});
</script>
</head>
<body>
	<center>
		<div id="JobTableContainer"></div>
	</center>
</body>
</html>